﻿@{
    ViewBag.Title = "Dat Nuoc Viet";
}
<script type="text/javascript">
    var isFirstLoad1 = true;

    $(document).ready(function () {
        $("#MenuGallery").removeClass("MenuGallery").addClass("active");
        $("#dialog1").dialog({ autoOpen: false, width: 600, height: 150 });
        $("#dialog2").dialog({ autoOpen: false, width: 550, height: 590 });
        LoadImage();
    });

    function InsertImage1() {
        $("#dialog1").dialog("open");
    }

    function SubmitUploadImage1() {
        var image = '<img alt="loading..." width="24px" height="24px" src="@Url.Content("~/Areas/Admin/Content/Images/loading.gif")" />';
        $("#loading1").append(image);
        $("#ImgForm1").submit();
    }

    function UploadImage_Complete1() {
        if (isFirstLoad1 == true) {
            isFirstLoad1 = false;
            return;
        }
        document.getElementById("ImgForm1").reset();
        var newImg = $.parseJSON($("#UploadTarget1").contents().find("#jsonResult")[0].innerHTML);
        if (newImg.IsValid == false) {
            alert(newImg.Message);
            $("#loading1").empty();
            return;
        }
        LoadImage();
        $("#loading1").empty();
        $("#dialog1").dialog("close");
    }

    function LoadImage() {
        var Id = 0;
        $.ajax({
            cache: false,
            type: "POST",
            data: "{}",
            url: '@Url.Action("GetGallery", "AdminHome")',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                $("#imgContainer").empty();
                var stringToBuild = '';
                $.each(result, function (index, images) {
                    stringToBuild += "<div class='tourimage'><img title='" + images.Title + "' onclick='preTourImage(" + images.Id + ");' onmouseover='this.style.cursor=\"pointer\"' alt='image' src='" + images.Image + "'/></div>"
                });
                $("#imgContainer").append(stringToBuild);
            },
            error: function () {
                alert("Lỗi load image");
            }
        });
    }

    function preTourImage(id) {
        $.ajax({
            cache: false,
            type: "POST",
            data: "{id:" + id + "}",
            url: '@Url.Action("GalleryDetail", "AdminHome")',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                $("#imageIdEdit").val(result.Id);
                $("#imageEdit").attr("src", result.Image);
                $("#titleE").val(result.Title);
                $("#imageDelete").removeAttr('checked');
                $("#dialog2").dialog("open");
            },
            error: function () {
                alert("Lỗi lấy thông tin image");
            }
        });
    }

    function TourImageUpdate() {
        var id = $("#imageIdEdit").val();
        var title = $("#titleE").val();
        var deleted = $("#imageDelete").attr('checked') == "checked" ? true : false;
        $.ajax({
            cache: false,
            type: "POST",
            data: "{id:" + id + ", deleted:" + deleted + ", title: '" + title + "'}",
            url: '@Url.Action("GalleryUpdate", "AdminHome")',
            contentType: "application/json; charset=utf-8",
            dataType: "text",
            success: function (result) {
                alert(result);
                LoadImage();
                $("#dialog2").dialog("close");
            },
            error: function () {
                alert("Lỗi gọi ajax");
            }
        });
    }
</script>
<div class="contenttitle">
    <div class="titleplace">
        <span>Thư viện hình ảnh</span>&nbsp;&nbsp;&nbsp;
    </div>
    <div class="clear">
        &nbsp;</div>
</div>
<div class="contentitem">
    <input type="button" value="Thêm hình ảnh" onclick="InsertImage1();" />
    <div id="imgContainer" style="margin-top: 10px;">
    </div>
    <div class="clear">
        &nbsp;</div>
</div>
<div id="dialog1" title="Upload hình ảnh">
    @using (Html.BeginForm("UploadGallery", "AdminHome", FormMethod.Post, new { enctype = "multipart/form-data", id = "ImgForm1", name = "ImgForm1", target = "UploadTarget1" }))
    {
        <div class="atributelabel">Tiêu đề</div>
        <div class="atributeeditor"><input type="text" class="input250" name="title" id="title" value=""/></div>
        <div class="clear">&nbsp;</div>
        <div class="atributelabel">Hình ảnh</div>
        <div class="atributeeditor">
            <input type="hidden" name="folderName1" id="folderName1" value="gallery/images" />
            <input type="file" name="UploadImage1" id="UploadImage1" />
            <input type="button" value="Upload" onclick="SubmitUploadImage1();" />
            <span id="loading1"></span>
            <br />
            <small style="color: Red;">* Hình ảnh nhỏ hơn 1mb - Định dạng file jpg, gif, png</small>
        </div>
        <div class="clear">&nbsp;</div>
        <iframe id="UploadTarget1" name="UploadTarget1" onload="UploadImage_Complete1();" style="position: absolute;left: -999em; top: -999em;"></iframe>
    }
</div>
<div id="dialog2" title="Chỉnh sửa hình ảnh">
    <input id="imageIdEdit" type="hidden" value="" />
    <p><img id="imageEdit" alt="image" width="500px" height="400px" src="" /></p>
    <div class="atributelabel">Tiêu đề</div>
    <div class="atributeeditor"><input type="text" class="input250" name="titleE" id="titleE" value=""/></div>
    <div class="clear">&nbsp;</div>
    <div class="atributelabel">Xóa:</div>
    <div class="atributeeditor"><input style="width:auto;" type="checkbox" class="input250" name="imageDelete" id="imageDelete"/></div>
    <div class="clear">&nbsp;</div>
    <div class="atributelabel">&nbsp;</div>
    <div class="atributeeditor">
        <input type="button" value="Lưu" onclick="TourImageUpdate();"/>
    </div>
    <div class="clear">&nbsp;</div>
</div>
